<template>
  <div class="wrapper">
    <!-- <el-button @click="loginForm">登录</el-button> -->

    <div class="loginPanel">
      <div class="topWrapper">
        <p class="topTitle">应用商店登录</p>
        <!-- <p class="des">云集最优质的资讯，最便捷交流</p> -->
        <!-- <p class="des"></p> -->
      </div>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="ruleForm.username"
            placeholder="请输入用户名/手机号/邮箱"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="form-validate" prop="validCode">
          <el-input
            type="text"
            style="width:12vw;"
            v-model="ruleForm.validCode"
            autocomplete="off"
            placeholder="请输入验证码"
          ></el-input>
          <div class="verifyCodeWrapper">
            <img :src="verifyCode" alt="验证码" />
            <i @click="refreshCode" class="el-icon-refresh-right codeRefresh"></i>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="loginSetting">
            <div class="rememberMe">
              <el-checkbox v-model="isRememberMe">记住我</el-checkbox>
            </div>
            <!-- <div class="register">
              没有账户？<router-link to="/main">注册</router-link>
            </div>-->
          </div>
          <div style="color: #f44336" v-if="errMsg">{{ errMsg }}</div>
          <el-button
            style="width:100%;border-radius:50px;"
            type="primary"
            @click="submitForm('ruleForm')"
          >登录</el-button>
        </el-form-item>
      </el-form>
<!--      <div class="btmWrapper">-->
<!--        <div class="login xinlangLogin"></div>-->
<!--        <div class="login wechatLogin"></div>-->
<!--        <div class="login qqLogin"></div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getLoginCode } from '@/utils/commonUtils'
export default {
  name: 'login',
  data() {
    var checkUsername = (rule, value, callback) => {
      // const mobileReg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/
      // const emailReg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/
      if (!value) {
        return callback(new Error('请输入账号'))
      }
      // if (!mobileReg.test(value) && !emailReg.test(value)) {
      //   return callback(new Error('请输入正确的邮箱或手机号'))
      // }
      callback()
    }
    var checkPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      }
      callback()
    }
    return {
      ruleForm: {
        username: '',
        password: '',
        validCode: ''
      },
      rules: {
        password: [{ validator: checkPassword, trigger: 'blur' }],
        username: [{ validator: checkUsername, trigger: 'blur' }],
        validCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      isRememberMe: false,
      verifyCode: '',
      keyupFunc: (v) => {
        if (v.code === 'Enter') {
          this.submitForm('ruleForm')
        }
      }
    }
  },
  methods: {
    refreshCode() {
      this.getVerifyCode()
    },
    getVerifyCode() {
      getLoginCode().then((result) => {
        this.verifyCode = window.URL.createObjectURL(result)
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isRememberMe) {
            localStorage.setItem('username', this.ruleForm.username)
            localStorage.setItem('password', this.ruleForm.password)
          } else {
            localStorage.removeItem('username')
            localStorage.removeItem('password')
          }
          this.$store
            .dispatch('login/userLogin', { ...this.ruleForm })
            .then((data) => {
              // this.$message({
              //   message: '登录成功,即将跳转到主页',
              //   type: 'success'
              // })
              this.$store.commit('home/setFilterId', {})
              setTimeout(() => {
                sessionStorage.setItem('currentTab', '1')
                this.$router.push({ path: '/main' })
              }, 0)
            })
            .catch(() => {
              this.refreshCode()
            })
        } else {
          console.log('error submit!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /**
     *  恢复登录信息
     */
    restoreLogin() {
      const username = localStorage.getItem('username')
      const password = localStorage.getItem('password')
      if (username && password) {
        this.ruleForm.password = password
        this.ruleForm.username = username
        this.isRememberMe = true
      }
    }
  },
  computed: {
    ...mapState({
      loginStatus: (state) => state.login.loginStatus,
      errMsg: (state) => state.login.errMsg
    })
  },
  created() {
    this.restoreLogin()
    this.getVerifyCode()
    document.addEventListener('keyup', this.keyupFunc)
    // 如果在登录页 获取到其他系统登录后的token,跳转到首页
    if (localStorage.getItem(('loginToken'))) {
      this.$store.commit('login/setLoginStatus', { access_token: localStorage.getItem('loginToken') })
      this.$router.push('/main/home')
    }
  },
  beforeDestroy() {
    document.removeEventListener('keyup', this.keyupFunc)
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  background: no-repeat center url('../../assets/login_bg.png');
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  position: relative;
  .form-validate /deep/ .el-form-item__content {
    display: flex;
  }
  .verifyCodeWrapper {
    display: flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 1.5vw;
    .codeRefresh {
      font-size: 20px;
      position: relative;
      /*bottom: 1vh;*/
      left: 1vw;
      cursor: pointer;
    }
  }
  .loginSetting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -10px;
    .register {
      width: 98px;
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(111, 124, 130, 1);
      line-height: 20px;
    }
  }
  .loginPanel {
    .topWrapper {
      text-align: center;
      .topTitle {
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(17, 130, 255, 1);
        line-height: 45px;
        margin: 35px 0 35px 0;
      }
      .des {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        margin-top: 10px;
        color: rgba(111, 124, 130, 1);
        line-height: 33px;
        margin-bottom: 50px;
      }
    }
    width: 28vw;
    /*height: 500px;*/
    min-width: 490px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    position: absolute;
    right: 10%;
    bottom: 50%;
    margin-bottom: -250px;
    .btmWrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      .login {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 10px;
        cursor: pointer;
      }
      .qqLogin {
        background-image: url('../../assets/icon_QQ.png');
      }
      .wechatLogin {
        background-image: url('../../assets/icon_weichat.png');
      }
      .xinlangLogin {
        background-image: url('../../assets/icon_xinlang.png');
      }
    }
  }
}
/deep/ .el-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/deep/ .el-form-item {
  width: 20vw;
}
/deep/ .el-form-item__content {
  margin-left: 0 !important;
}
/deep/ .el-input input {
  border-radius: 50px;
}
</style>
